<template>
  <div class="login-container">
    <div class="headTop">
      <img src="@/assets/whiteLogo.png" />
      <div class="headText">
        <div class="headTit">光明地板管理平台</div>
        <div class="engText">management system</div>
      </div>
    </div>
    <div class="Copyright">Copyright © 2022</div>
    <div class="login-box">
      <!-- <div class="login-left">
        <div class="logo-img">
          <img src="../../assets/shengxiangLogo.png" />
        </div>
        <div class="logo-system-name">光明地板管理平台</div>
      </div> -->
      <div class="login-right">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
          label-position="left">
          <div class="login-title">用户登录</div>
          <div class="login-input-box">

            <el-form-item prop="username">
              <div class="login-row">
                <i class="el-icon-user"></i>
                <el-input class="login-row-input" placeholder="请输入用户名" type="text" v-model="loginForm.username"
                  name="username" ref="username" />
              </div>
            </el-form-item>

            <el-form-item prop="password">
              <div class="login-row">
                <i class="el-icon-lock"></i>
                <el-input class="login-row-input" placeholder="请输入密码" type="password" v-model="loginForm.password"
                  name="password" ref="password" />
              </div>
            </el-form-item>

            <el-form-item prop="code">
              <div class="login-checkingCode">
                <div class="login-row">
                  <i class="el-icon-notebook-2"></i>
                  <el-input class="login-row-input" placeholder="请输入验证码" type="text" v-model="loginForm.code"
                    name="code" ref="code" />
                </div>
                <img @click="checkCode" :src="loginForm.checkCodeImg" class="code-img" />
              </div>
            </el-form-item>

            <el-button class="login-sub" type="submit" @click.native.prevent="handleLogin" :loading="loading">登录
            </el-button>

          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    isEmpty
  } from '@/utils/validate'
  import {
    md5
  } from '@/utils/MD5'
  import {
    login,
    loginCheckCode
  } from '@/api/login'

  export default {
    data() {
      const validateCode = (rule, value, callback) => {
        if (isEmpty(value)) {
          callback(new Error('请输入验证码'))
        } else if (value.length !== 4) {
          callback(new Error('验证码格式错误'))
        } else {
          callback()
        }
      };
      return {
        loginForm: {
          username: '',
          password: '',
          checkCodeImg: '',
          code: '',
          auth: ''
        },
        loginRules: {
          username: [{
            required: true,
            trigger: 'blur',
            message: '请输入用户名'
          }],
          password: [{
            required: true,
            trigger: 'blur',
            message: '请输入密码'
          }],
          code: [{
            required: true,
            trigger: 'blur',
            validator: validateCode
          }]
        },
        loading: false,
        passwordType: 'password',
        redirect: undefined,
      }
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    mounted() {
      this.checkCode();
      //监听enter键，enter提交和提交按钮执行操作一致
      window.document.onkeyup = (event) => {
        if (event.keyCode == 13) this.handleLogin();
      };
    },
    methods: {
      // 获取验证码
      async checkCode() {
        var result = await loginCheckCode();
        this.loginForm.checkCodeImg = result.data.img;
        this.loginForm.auth = result.data.auth;
      },
      async handleLogin() {
        this.$refs.loginForm.validate(async valid => {
          if (!valid) return false;
          this.loading = true
          try {
            var params = {
              username: this.loginForm.username,
              password: md5(this.loginForm.password),
              code: this.loginForm.code,
              auth: this.loginForm.auth,
            }
            //登陆user
            await this.$store.dispatch('user/login', params);
            //获取菜单
            await this.$store.dispatch('menu/loadMenuList');
            //跳到首页
            var path = this.redirect || '/';
            this.$router.push({
              path: path
            });
          } finally {
            this.loading = false;
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .login-row-input::-webkit-input-placeholder {
    color: #c3c4c5;
    font-size: 14px;
  }

  /deep/.el-input__inner {
    border: none;
  }

  .el-form-item {
    margin-bottom: 30px;
  }

  .login-container {
    .headTop{
      padding: 20px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      img{
        width: 38px;
        margin-right: 10px;
      }
      .headText{
        color: #fff;
        .headTit{
          font-size: 20px;
          font-weight: bold;
          padding-top: 5px;
        }
        .engText{
          opacity: 0.85;
          font-size: 14px;
          margin-top: 4px;
          font-weight: normal;
          text-transform: Uppercase;
        }
      }
    }
    .Copyright{
      width: 100%;
      position: fixed;
      font-size: 14px;
      text-align: center;
      color: #fff;
      opacity: 0.75;
      padding-bottom: 10px;
      bottom: 0;
      left: 0;
      right: 0;
      cursor: pointer;
    }
    height: 100%;
    background-image: url('../../assets/systemLoginBg2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-box {
      // width: 750px;
      width: 375px;
      margin-right: -20px;
      height: 390px;
      background-color: rgba(45, 156, 231, 1);
      box-shadow: 0 0 10px rgba(62, 84, 177, 0.8);
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-wrap: nowrap;

      .login-left {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #4193fa;

        .logo-img {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background-color: #fff;
          box-shadow: 0 0 10px rgba(62, 84, 177, 0.8);
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
          }
        }

        .logo-system-name {
          font-size: 22px;
          color: #fff;
          margin-top: 15px;
          letter-spacing: 2px;
        }
      }

      .login-right {
        // width: 50%;
        width: 100%;
        height: 100%;
        background-color: #fff;

        .login-title {
          color: #333;
          font-size: 20px;
          font-weight: bold;
          letter-spacing: 2px;
          text-align: center;
          line-height: 50px;
          padding-top: 10px;
          margin-bottom: 3px;
        }

        .login-input-box {
          padding: 0 20px;

          .login-row {
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;
            border: 1px solid #e5e5e5;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 3px;

            i {
              color: #b0bfc9;
              font-size: 20px;
              margin: 0 15px;
            }

            .login-row-input {
              border: none;
              outline: none;
              height: 40px;
              width: 100%;
              font-size: 16px;
            }
          }

          .login-checkingCode {
            display: flex;
            justify-content: space-between;

            .login-row {
              width: 60%;
            }

            .code-img {
              width: 110px;
              border: 1px solid #e5e5e5;
              height: 48px;
              cursor: pointer;
            }
          }

          .login-sub {
            width: 100%;
            height: 45px !important;
            text-align: center;
            border: none;
            border-radius: 5px;
            background-color: #1890ff;
            color: #fff;
            outline: none;
            font-size: 15px;
            cursor: pointer;
            margin-top: 10px;
          }
        }
      }
    }
  }
</style>
